<template lang="">
    <div class="swiper-container" ref="cur">
                                    <div class="swiper-wrapper">
                                        <div class="swiper-slide" v-for="(carousel, index) in list" :key="carousel.id">
                                            <img :src="carousel.imgUrl">
                                        </div>
                                        <!-- <div class="swiper-slide">
                                            <img src="./images/floor-1-b02.png">
                                        </div>
                                        <div class="swiper-slide">
                                            <img src="./images/floor-1-b03.png">
                                        </div> -->
                                    </div>
                                    <!-- 如果需要分页器 -->
                                    <div class="swiper-pagination"></div>

                                    <!-- 如果需要导航按钮 -->
                                    <div class="swiper-button-prev"></div>
                                    <div class="swiper-button-next"></div>
                                </div>
</template>
<script>
//引入Swiper
import Swiper from "swiper";
export default {
  name: "Carousel",
  props: ["list"],
  watch: {
    list: {
      //立即监听: 不管数据有无变化，上来立即监听
      //为什么watch监听不到list，因为这个数据从来没有发生过变化（数据是父亲给的，父亲给的时候就是一个对象，对象里面该有的数据都是有的）
      immediate: true,
      handler() {
        // 只能监听到数据已经有了，但是v-for动态渲染结构我们还是没有办法确认，因此还是需要用到nextTick
        this.$nextTick(() => {
          var mySwiper = new Swiper(
            // document.querySelector(".swiper-container"),
            this.$refs.cur,
            {
              loop: true, // 循环模式选项

              // 如果需要分页器
              pagination: {
                el: ".swiper-pagination",
                clickable: true
              },

              // 如果需要前进后退按钮
              navigation: {
                nextEl: ".swiper-button-next",
                prevEl: ".swiper-button-prev"
              }

              // // 如果需要滚动条
              // scrollbar: {
              //   el: '.swiper-scrollbar',
              // },
            }
          );
        });
      }
    }
  }
};
</script>
<style lang="">
</style>